@import "~taro-ui/dist/style/components/activity-indicator.scss";
@import '~taro-ui/dist/style/components/loading.scss';
// @import "~taro-ui/dist/style/components/flex.scss";

@mixin text_overflow($num:3) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*设置对齐模式*/
    -webkit-line-clamp: $num;
    /*设置多行的行数，示例为2行*/
}

$normalColor:#333333;
$lightColor:#999999;

.todo_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;


    .todo_option {
        height: 98px;
        background-color: #ffffff;
        padding: 0 30px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0.02133rem solid #e3e3e3;

        .left {
            margin-right: 10px;
        }

        .lg_sele_B_name {
            padding: 0;
            font-size: 30px;
        }

        .my_ipt {
            width: 250px;

            .lg_search_warp_A {
                padding: 0;
            }

            .lg_search {
                background-color: #f5f5f5;
            }
        }

        .my_search_icon {
            position: relative;
            width: 64px;
            height: 32px;
            border-left: 1px solid #e3e3e3;

            &::after {
                position: absolute;
                right: 0;
                content: '';
                width: 32px;
                height: 32px;
                background: url(../images/search.svg) no-repeat;
                background-size: contain;
            }
        }
    }

    .num_todo {
        font-size: 12px;
        color: #989898;
        opacity: 0.7;
        margin-bottom: 20px;
    }

    .index {
        flex: 1;
    }

    .container_LayerOut_content_box {
        background-color: #f5f5f5;
    }

    .metting_box {
        width: 100%;
        padding: 47px 36px 54px;
        background-color: #fff;
        box-sizing: border-box;

        .title {
            margin-bottom: 35px;
            font-size: 34px;
            font-weight: normal;
            font-stretch: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 36px;
            letter-spacing: 0px;
            color: #333333;
        }

        .row {
            display: flex;
            align-items: flex-start;

            .active_location {
                max-width: 450px;
                margin-left: 21px;
                color: #333333;
                font-size: 30px;
            }

            .meeting_left {
                text-align: end;
                width: 135px;
                font-size: 30px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 48px;
                color: #999999;
            }

            .meeting_right {
                max-width: 450px;
                margin-left: 21px;
                font-size: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                font-stretch: normal;
                line-height: 48px;
                color: #333333;
            }
        }
    }

    .footer_operation {
        display: flex;
        justify-content: space-between;
        padding: 33px 36px 0;
        height: 196px;
        background-color: #fff;
        margin-top: 16px;
        box-sizing: border-box;

        .btn {
            flex: 33.3333%;
        }

        .btn2 {
            margin: 0 30px
        }
    }
}

.reason_box {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: .3);
    z-index: 100;
    transition: all .5s;


    .reason_card {
        position: absolute;
        left: 50%;
        top: 200px;
        transform: translateX(-50%);
        width: 480px;
        padding: 30px;
        background-color: #fff;
        border-radius: 6px;

        .title {
            text-align: center;
            margin-bottom: 30px;
        }

        .option {
            display: flex;
            margin-bottom: 30px;
            font-size: 24px;
        }

        .reason_footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .btn {
                flex: 50%;

                &:nth-of-type(2) {
                    margin-left: 10px;
                }
            }
        }
    }
}

.adm-popup-body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .custom_pop {
        flex: 1;
        width: 100%;
        padding-bottom: 170px;

        .source_name {
            padding: 24px 30px 0 30px;
            height: 98px;
            border-bottom: 1px solid #d9d9d9;
            background-color: #ffffff;
            box-shadow: 0px 1px 0px 0px #d9d9d9;
            border-radius: 24px 24px 0px 0px;
            box-sizing: border-box;
            font-family: PingFang-SC-Regular;
            font-size: 32px;
            font-weight: 600;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
        }

        .custom_title {
            display: inline-block;
            width: 100%;
            padding: 47px 36px 35px 36px;
            font-size: 34px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            box-sizing: border-box;
            background-color: #fff;

            .text {
                display: inline-block;
                @include text_overflow(2);
            }
        }

        .content_box {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            margin-bottom: 16px;
            padding-bottom: 54px;

            .custom_row {
                display: flex;
                padding: 0 36px;
                text-align: start;
                margin-bottom: 4px;

                .left,
                .right {
                    display: inline-block;
                    line-height: 48px;
                }

                .left {
                    font-size: 30px;
                    color: #999999;
                }

                .right {
                    max-width: 520px;
                    font-size: 30px;
                    color: #333333;
                    @include text_overflow(3);
                    &:nth-of-child(2){
                        display: inline-block;
                    }
                }
            }
        }

        .custom_footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 18px;
            padding-bottom: 75px;
            box-sizing: border-box;
            background-color: #fff;

            .btn {
                display: flex;
                align-items: center;
                width: 206px;
            }
        }
    }
}